import React, {useState} from "react";
import {Button, Center, ScrollView, Text, View} from "native-base";
import {TouchableOpacity, StyleSheet, Dimensions} from "react-native";
import {ChineseItem} from "./chineseItem";

const {height} = Dimensions.get('window');

export const RadicalsItem = ({setShow, setIpt, _searchPressingEnter}) => {
    const [chinese] = useState(['冫', '厂', '刂', '阝', '卩', '亻', '讠', '艹', '彳', '辶', '寸', '广', '马', '门',
        '宀', '女', '犭', '饣', '扌', '氵', '纟', '忄', '贝', '灬', '牜', '攵', '礻', '月', '禾', '钅', '皿', '疒', '目', '衤',
        '冖',
    ]);
    //偏旁弹窗点击改变颜色
    const [chineseNum,setChineseNum] = useState([
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
        0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    ]);

    return (
        <Center style={styles.radicals}>
            <Center style={styles.radicalsContent}>
                <Text style={styles.radVesselsOne}>偏旁部首快速选择器</Text>
                <ScrollView style={{height: '100%', width: '100%'}}>
                    <View style={styles.radVesselsTwo}>
                        {chinese.map((item, index) => {
                            return (
                                <ChineseItem chinese={item} index={index} key={index} setChineseNum={setChineseNum} chineseNum={chineseNum[index]} setIpt={setIpt}/>
                            );
                        })}
                    </View>
                </ScrollView>
                <View style={styles.radVesselsThree}>
                    <Button
                        _text={{color: '#fff'}}
                        style={styles.three}
                        onPress={() => {
                            setShow(false);
                        }}>
                        <Center _text={{color: 'black'}}>取消</Center>
                    </Button>
                    <Button
                        onPress={() => {
                            _searchPressingEnter();
                        }}
                        style={styles.three}
                        _text={{color: '#fff'}}>
                        <Center _text={{color: '#576b95'}}>确定</Center>
                    </Button>
                </View>
            </Center>
        </Center>
    );
}

const styles = StyleSheet.create({
    radicalsNumS: {
        width: 50,
        height: 50,
        borderWidth: 1,
        color: '#fff',
        backgroundColor: '#ffa501',
        borderColor: '#ffa501',
        borderRadius: 5,
        marginBottom: 10,
    },
    radicals: {
        width: '100%',
        height: height - 50,
        backgroundColor: 'rgba(0,0,0,.3)',
        position: 'absolute',
        padding: 30,
        top: 0,
        left: 0,
        zIndex: 9999,
    },
    radicalsContent: {
        backgroundColor: '#fff',
        width: '100%',
        height: '100%',
        paddingTop: 50,
        paddingBottom: 80,
        borderRadius: 10,
    },
    radVesselsOne: {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%',
        height: 50,
        lineHeight: 50,
        textAlign: 'center',
        fontSize: 18,
        borderRadius: 10,
    },
    radVesselsTwo: {
        width: '100%',
        height: '100%',
        padding: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
        flexWrap: 'wrap',
    },
    radVesselsThree: {
        position: 'absolute',
        bottom: 0,
        left: 0,
        width: '100%',
        height: 80,
        borderRadius: 10,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    three: {
        width: '50%',
        height: '100%',
        fontSize: 20,
        backgroundColor: '#fff',
    },
})